<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="js/clientUtils.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
        <title>专家支持</title>

    </head>
    <body>
        <style>
            html , body , .app{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #111; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}

            .app{ position: relative; overflow: hidden;} 
            router-view{
                display: block;
                width: 100%;
                min-height: 500px;
                border:1px solid #666;
            }


            ul.lstRouters{
                padding: 10px;
            }
            ul.lstRouters li{
                float: left;
                height: 30px;
                line-height: 30px;
                text-align: center;
                width: 100px;
            }
            ul.lstRouters li:hover{
                cursor: pointer;
                font-weight: bold;
            }
        </style> 
        <div class="app" id="app">  
            <ul class="lstRouters clearfix">
                <li @click="onPickItem" data-rk="/">home</li>
                <li @click="onPickItem" data-rk="/comTm">comTm</li>
            </ul>
            <div style="padding: 15px;">
                <router-view></router-view>
            </div>
            
        </div>
        <script> 
            const componentManager = {
                vue: null,
                components:{},
                routers:{},
                componentDatas:{}, 
                regist(key , component){
                    var me = componentManager;
                    try{ 
                        me.components[key] = component;
                        me.componentDatas[key]={};
                        me.routers[key]={
                            path:key ,
                            component: component
                        } 
                    }
                    catch(er){
                        console.log(er);
                    } 
                },
                createComponentByHtml(componentName , templateHtml, dataHandler){
                    var me = componentManager;
                    var res = null;
                    try{ 
                        res = (new TComponent(componentName , "" , dataHandler)).getComponentByHtml(templateHtml);
                    }
                    catch(er){
                        console.log(er);
                    } 
                    return res;
                }, 
                createComponentByTemplateFn(componentName , templateFn, dataHandler){
                    var me = componentManager; 
                    return new Promise((success , faild)=>{
                        try{ 
                            (new TComponent(componentName , templateFn , dataHandler)).getComponent().then(comp=>{
                                success(comp);
                            });
                        }
                        catch(er){
                            console.log(er);
                        } 
                    })
                }, 
                loadComponent(componentName , data ){
                    var me = componentManager;
                    try{
                        if( me.components[componentName]){
                            var comp = components[componentName];
                            me.componentDatas[componentName] = (data && data!=null)?data:{};
                            var url = componentName+"?"+( new Date()).getTime();  
                            me.vue.$router.push({ path:  url });
                        }
                    }
                    catch(er){
                        console.log(er);
                    }
                }
            }
            class TComponent{
                constructor( componentName , templatePath , dataHandler ){
                    this.componentName = componentName;
                    this.templatePath = templatePath;
                    this.dataHandler = dataHandler;
                }
                getComponentByHtml(templateHtml){
                    var me = this;
                    var resComponent ={
                            template:templateHtml,
                            data(){
                                return {
                                    dataInfo: componentManager[me.componentName]
                                }
                            },
                            computed:{
                                componentInfo(){
                                    var self = this;
                                    var res = self.dataInfo;
                                    if( me.dataHandler && dataHandler!=null){
                                        try{
                                            res = me.dataHandler(res);
                                        }
                                        catch(err){
                                            res = self.dataInfo;
                                            console.log(eer);
                                        }
                                    }
                                    return res;
                                }
                            }
                        }
                    return resComponent;
                }
                getComponent(){
                    var me = this;
                    return new Promise((success , faild)=>{ 
                        try{
                            var onGet = function( aHtml){
                                var res = me.getComponentByHtml(aHtml);
                                success(res);
                            }
                            $.ajax({
                                url: me.templatePath,
                                    cache: false,
                                    success: function (aRes) {
                                        resComponent.template = aRes;
                                        onGet(aRes);
                                    },
                                    error: function (a, b, c) {
                                        onGet("");
                                    }
                            });
                        }
                        catch(er){
                            success(resComponent);
                        }
                    })
                }
            }
 
            const appRoot = new Vue({
                created(){
                    componentManager.vue = this;
                },
                router: new VueRouter({
                    routes : Object.values(componentManager.routers)
                }),
                methods:{
                    onPickItem(event){
                        var me = this;
                        var rk = event.currentTarget.dataset.rk;
                        ComponentCenter.loadComponent(rk,{ msg:'ddddd'+( new Date()).getTime()})
                    }
                }  
            }).$mount('#app') 
        </script>
    </body>
</html>